<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            position: relative;
            width: 590px;
            height: 470px;
            margin: 50px auto 0;
            background: pink;
        }

        .box>img {
            position: absolute;
            top: 0;
            left: 0;
            transition: .5s linear;
        }

        .box>.img:first-child {
            z-index: 10;
        }

        .left-btn {
            /* display: flex;
            justify-content: center;
            align-items: center; */
            position: absolute;
            top: 50%;
            left: 0;
            transform: translate(0, -50%);
            width: 25px;
            height: 35px;
            background: rgba(00, 00, 00, 0.5);
            z-index: 100;
            border-top-right-radius: 17.5px;
            border-bottom-right-radius: 17.5px;
        }

        .left-btn img {
            width: 25px;
            height: 25px;
            position: absolute;
            top: 50%;
            transform: translate(0, -50%);
        }

        .right-btn {
            position: absolute;
            top: 50%;
            right: 0;
            transform: translate(0, -50%);
            width: 25px;
            height: 35px;
            background: rgba(00, 00, 00, 0.5);
            z-index: 100;
            border-top-left-radius: 17.5px;
            border-bottom-left-radius: 17.5px;
        }

        .right-btn img {
            position: absolute;
            top: 50%;
            transform: translate(0, -50%);
            width: 25px;
            height: 25px;
        }

        .circle-btn-list {
            position: absolute;
            bottom: 30px;
            left: 30px;
            display: flex;
            list-style: none;
            padding: 0;
            margin: 0;
            z-index: 20;
        }

        .circle-btn-list li {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: #000;
            margin: 0 5px;
        }

        .circle-btn-list li.active {
            background: #fff;
        }

        .circle-btn-list li:hover {
            background: #fff;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left-btn">
            <img src="../images/right.png" alt="">
        </div>

        <div class="right-btn">
            <img src="../images/left.png" alt="">
        </div>

        <img class="img" style="z-index: 10;" src="./images/01.jpg" alt="">
        <img class="img" src="../images/02.jpg" alt="">
        <img class="img" src="../images/03.jpg" alt="">
        <img class="img" src="../images/04.jpg" alt="">
        <img class="img" src="../images/05.jpg" alt="">
        <img class="img" src="../images/06.jpg" alt="">
        <img class="img" src="../images/07.jpg" alt="">

        <ul class="circle-btn-list">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>


    <script>
        var imgs = document.querySelectorAll('.box .img')
        var circleBtnList = document.querySelectorAll('.circle-btn-list li')
        var currentIndex = 0
        var timer = null

        function start () {
            timer = setInterval(function () {
                for (var i = 0; i < imgs.length; i++) {
                    imgs[i].style.zIndex = 0
                    imgs[i].style.opacity = 0
                }
    
                if (currentIndex === 6) {
                    currentIndex = 0
                } else {
                    currentIndex = currentIndex + 1
                }
    
                imgs[currentIndex].style.zIndex = 10
                imgs[currentIndex].style.opacity = 1
    
                // currentIndex++

                console.log(circleBtnList)

                // 把所有的小圆点全部清空背景色
                // 将需要显示的小圆点加上active类

                for (var j = 0; j < circleBtnList.length; j++) {
                    circleBtnList[j].className = ''
                }

                circleBtnList[currentIndex].className = 'active'

            }, 3000)
        }

        start()

        // 绝对定位实现小圆点列表
        // 小圆点hover的时候，背景色变化

        // 思路
        // 点击按钮的时候，停止定时器,执行下一张显示的操作
        // 开启定时器

        document.querySelector('.right-btn').onclick = function () {
            clearInterval(timer)
            timer = null

            // 下一张图片显示

            if (currentIndex === 6) {
                currentIndex = 0
            } else {
                currentIndex = currentIndex + 1
            }

            for (var i = 0; i < imgs.length; i++) {
                imgs[i].style.zIndex = 0
                imgs[i].style.opacity = 0
            }

            imgs[currentIndex].style.zIndex = 10
            imgs[currentIndex].style.opacity = 1

            for (var j = 0; j < circleBtnList.length; j++) {
                circleBtnList[j].className = ''
            }

            circleBtnList[currentIndex].className = 'active'

            start()
        }

        document.querySelector('.left-btn').onclick = function () {
            clearInterval(timer)
            timer = null

            // 上一张图片显示
            if (currentIndex === 0) {
                currentIndex = 6
            } else {
                currentIndex = currentIndex - 1
            }

            for (var i = 0; i < imgs.length; i++) {
                imgs[i].style.zIndex = 0
                imgs[i].style.opacity = 0
            }

            imgs[currentIndex].style.zIndex = 10
            imgs[currentIndex].style.opacity = 1

            for (var j = 0; j < circleBtnList.length; j++) {
                circleBtnList[j].className = ''
            }

            circleBtnList[currentIndex].className = 'active'

            start()
        }

    </script>
</body>
</html>